<template>
  <uni-nav-bar title="商品详情页" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <image :src="orderAll.image" mode="" style="width:100%;height:750rpx;"></image>
  <view class="shopdetail">
    <view class="center" style="color:#1B91FF;font-size: 32rpx;"><text>{{orderAll.score}}</text><text>积分</text></view>
    <view>{{orderAll.name}}</view>
    <view style="color:#666;font-size: 28rpx;">库存：{{orderAll.stock}}</view>
  </view>
  <view style="width: 100%;height: 185rpx;"></view>
  <view class="space-between package intBot" style="margin:0px;">
    <view class="center">
      <image :src="integral1" mode="" style="width:49rpx;height:49rpx;margin-right: 15rpx;"></image>
      <view class="direction-start">
        <text style="color:#666;font-size: 24rpx;">当前可用积分{{userInfo.integral}}</text>
        <text style="color:#1B91FF;">{{orderAll.score}}积分</text>
      </view>
    </view>
    <view class="but" @click="show?exchange():''" :style="{background:show?'#1B91FF':'#999'}">积分兑换</view>
  </view>
</template>

<script setup lang="ts">
  import { navBack,redirectTo } from '@/utils/navigator';
  import { integral1 } from '@/utils/Static';
  import { ref } from 'vue';
  import { errorToast, successToast, showLoading } from '@/utils/prompt';
  import { getGoodsInfo } from '@/gql/integral';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  /**
   * 积分详情页面
   * @param driver_id  用户ID
   * @param list  轮播图列表
   * @param userInfo  用户信息
   * @param orderAll  积分全部信息
   * @param shopID  积分商品ID
   */
  const driver_id = getDriverID();
  const userInfo = useUserStore();
  const orderAll = ref({});
  const shopID = ref('');
  const repeat = ref(true); //放重复点击
  const show = ref(true)
  onLoad((pearm) => {
    shopID.value = pearm.id;
    init();
  });
  /**
   * 初始化积分信息
   * @param id  积分商品ID
   * @param orderAll  积分商品详情
   * @param list  积分轮播图列表
   */
  function init() {
    const payload = {
      query: getGoodsInfo,
      variables: {
        id: Number(shopID.value),
      },
    };
    toPublish('ql/score/getGoodsInfo', payload, (obj : any) => {
      const { getGoodsInfo } = obj.data;
      orderAll.value = getGoodsInfo;
      if (userInfo.integral < getGoodsInfo.score) {
        show.value = false
      }
    });
  }
  /**
   * 提交积分兑换信息
   * @param id  积分商品ID
   * @return 更新用户积分信息
   */
  function exchange() {
    showLoading();
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    const payload = {
      goods_id: Number(shopID.value),
      driver_id,
    };
    toPublish('score/buyGoods', payload, (obj : any) => {
      const { code, msg } = obj;
      if (code === 1) {
        init()
        repeat.value = true;
        userInfo.integrate();
        successToast(msg);
        setTimeout(()=>{
          redirectTo('pointsMall/exchange')
        },1000)
      } else {
        repeat.value = true;
        errorToast(msg);
      }
    });
  }
</script>

<style scoped lang="less">
  @import url('../pointsMall/less/integralDetail.less');
</style>